<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path;
%>
<!DOCTYPE html>
<html>

<body class="skin-blue">
<!-- header logo: style can be found in header.less -->


<!-- getHeader -->
<s:action name="getHeader" namespace="/privilege" executeResult="true"/>
<div class="wrapper row-offcanvas row-offcanvas-left">
    <!-- Left side column. contains the logo and sidebar -->

    <!-- getMenus -->
    <s:action name="getMenus" namespace="/privilege" executeResult="true"/>

    <!-- Right side column. Contains the navbar and content of the page -->
    <aside class="right-side">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>运营数据
                <small>用户分析统计</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
                <li><a href="#">Tables</a></li>
                <li class="active">Data tables</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box">

                        <div class="box">

                            <div class="box-body">

                                <form action="javascript:searchUser();" class="form-inline" name="searchForm">
                              <div class="row"  >
                   
						     <div class="col-md-4">
						    <div class="right col-xs-3 text-right">
						        <label for="">起始时间:</label>
						    </div>
						     <div class="right col-xs-6 text-left">
						        <div class="input-group">
						          <input type="text" class="form-control date-tm" value="${search.orderCreateTimeStart}" id="orderCreateTimeStart" name="orderCreateTimeStart"  placeholder="">
						          <span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-time" aria-hidden="true"></span></span>
						        </div>
						    </div>
						    </div>
						    
						    <div class="col-md-4">
						     <div class="right col-xs-3 text-right">
						        <label for="">结束时间:</label>
						    </div>
						    <div class="right col-xs-6 text-left">
						        <div class="input-group">
						          <input type="text" class="form-control date-tm"  value="${search.orderCreateTimeEnd}"" id="orderCreateTimeEnd" name="orderCreateTimeEnd"  placeholder="">
						          <span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-time" aria-hidden="true"></span></span>
						        </div>
						    </div>
						    </div>
						    
						    </div>
                                    <br/>
                                   <div class="row" align="center">
                                    <button type="submit" class="btn btn-info">查询</button>
                                    </div>
                                </form>
                            </div>
                            <!-- /.box-body -->
                        </div>
                        <!-- /.box -->
                    </div>
                    
                    
                   <div class="nav-tabs-custom">
                                <!-- Tabs within a box -->
                                <ul class="nav nav-tabs pull-right">
                                	 <li><a href="#chart_div" data-toggle="tab">图表</a></li>
                                    <li class="active"><a href="#table_div" data-toggle="tab">列表</a></li>
                                   
                                </ul>
                                <div class="tab-content no-padding">
                                	<br/>
                                    <!-- Morris chart - Sales -->
                                    <div class="tab-pane active" id="table_div" style="position: relative;min-height: 900px">
                                   		 
                                   		 <form method="post" target="_self" action="" name="listForm">
                          			  		<div class="box-body table-responsive" id="listDiv"><s:property value="res" escape="false"/> </div>
                       					 </form>
                       					 
                                    </div>
                                    <div class="tab-pane" id="chart_div" style=" position: relative;min-height: 900px">
                               		    <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>           
                                    </div>
                                </div>
                     </div>
                     <%--
                     <div class="box" id="listdetails">
                     <!-- 文章列表 -->
                        <form method="post" target="_self" action="" name="listForm">
                            <div class="box-body table-responsive" id="listDiv">
						
                                <s:property value="res" escape="false"/>
                            </div><!-- /.box-body -->
                        </form>
                    </div>
                --%>
                </div>
            </div>

        </section><!-- /.content -->
    </aside><!-- /.right-side -->
</div><!-- ./wrapper -->
</body> 


<script type="text/javascript">


    //查询用户列表
    function searchUser() {


		  var start = $.trim($("#orderCreateTimeStart").val());
		  var end =  $.trim($("#orderCreateTimeEnd").val());
		  if(''==start){
			alert("请输入开始时间!");

			return;
		  }

		  if(''==end){
				alert("请输入结束时间!");

				return;
		  }
	    	
    	
          listTable.filter['orderCreateTimeStart'] = start;
          listTable.filter['orderCreateTimeEnd'] = end;
         listTable.action = "<%=basePath%>/report/ajaxQueryUserReport.action";

         listTable.loadList();      
        $("#listDiv").listview('refresh');
    }


    //折线图
    function paintClumn(json){

       	$("#container").show();
    	var clumd = new Array();
      	var rowd1 = new Array();
      	var rowd2 = new Array();
      	var rowd3 = new Array();
        
     	
      	for(var i=1;i<json.length;i++){
      			clumd[i-1] = json[i].registerDate;
      			rowd1[i-1]= json[i].num1;
      			rowd2[i-1]= json[i].num2;
      			rowd3[i-1]= json[i].num3;
      	}
	 

      	Highcharts.chart('container', {

      	    title: {
      	        text: '用户数据简表 '
      	    },

      	    subtitle: {
      	        text: '最多查询三个月内'
      	    },

      	    yAxis: {
      	        title: {
      	            text: '数量'
      	        }
      	    },
      	    legend: {
      	        layout: 'vertical',
      	        align: 'right',
      	        verticalAlign: 'middle'
      	    },

            xAxis: {
                categories: clumd,
                title: {
                    text: '日期'
                },
               labels:{
               		rotation: 90
               }
            }, 
      	    series: [{
      	        name: '注册量',
      	        data: rowd1
      	    }, {
      	        name: '登录量',
      	        data: rowd2
      	    }, {
      	        name: '最高在线量',
      	        data:rowd3
      	    }]

      	});
    }
    
    
</script>
<head>
   <meta charset="UTF-8">
    <title>AdminLTE | Data Tables</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>

    <script type="text/javascript" src="<%=basePath%>/js/admin/utils.js"></script>
    <script type="text/javascript" src="<%=basePath%>/js/base/listtable.js"></script>
    
    <link href="<%=basePath%>/AdminLTE/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
    <script type="text/javascript" src="<%=basePath%>/AdminLTE/js/bootstrap.min.js" charset="UTF-8"></script>
    <script type="text/javascript" src="<%=basePath%>/AdminLTE/js/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
    <script type="text/javascript" src="<%=basePath%>/AdminLTE/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
 	<script type="text/javascript" src="<%=basePath%>/AdminLTE/js/highcharts.js"></script>
  </head>

<script type="text/javascript">
    $('.date-tm').datetimepicker({
    	minView: "month", 
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        showMeridian: 1,
        autoclose: true,
        format: 'yyyy-mm-dd',
        language: 'zh-CN',
    });
</script>

</html>